<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>健康管理</el-breadcrumb-item>
      <el-breadcrumb-item>采集健康信息</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="a">
      <el-dialog
          width="75%"
          title="选择长者信息"
          :visible.sync="innerVisible"
          append-to-body>
        <el-input placeholder="请输入长者姓名" clearable v-model="olderName" @clear="searchOlder" style="width: 250px">
          <el-button slot="append" icon="el-icon-search" @click="searchOlder"></el-button>
        </el-input>

        <template>
          <el-table
              :data="olderList"
              style="width: 100%"
              :row-class-name="tableRowClassName"
          >
            <el-table-column
                label="编号"
                type="index"
                width="100">
            </el-table-column>
            <el-table-column
                prop="name"
                label="长者姓名"
                width="100">
            </el-table-column>
            <el-table-column
                prop="sex"
                label="性别"
                width="100">
            </el-table-column>
            <el-table-column
                prop="bed.bedname"
                label="床位号"
                width="300">
            </el-table-column>
            <el-table-column
                prop="idcard"
                label="长者身份证号"
                width="220">
            </el-table-column>
            <el-table-column
                prop="checkdate"
                label="入住日期"
                width="150">
            </el-table-column>
            <el-table-column
                label="在院状态"
                width="120"
            >
              <template slot-scope="scope">
                <span style="color: red" v-if="scope.row.status == 0">退房</span>
                <span style="color: green" v-if="scope.row.status == 1">入住</span>
                <span style="color: red" v-if="scope.row.status == 2">待退房</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    v-if="scope.row.status != 0"
                    @click="selectOlderAdd(scope.row.id,scope.row.name)">选择
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <el-pagination
            @size-change="olderSizeChange"
            @current-change="olderCurrentChange"
            :current-page="olderPageNum"
            :page-sizes="[3, 6 , 12, 24]"
            :page-size="olderPageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="olderTotal"
        ></el-pagination>
      </el-dialog>
      <el-form ref="addHealthForm" :rules="addHealthRules" :model="addHealthForm" label-width="100px" size="medium">
        <el-form-item label="老者" prop="name" @click="innerVisible = true">
          <el-button type="primary" v-model="addHealthForm.olderId" @click="innerVisible = true" style="width: 100px">
            {{ addHealthForm.name }}
          </el-button>
        </el-form-item>

        <el-form-item label="采集日期" prop="collectDate">
          <el-date-picker
              v-model="addHealthForm.collectDate"
              type="date"
              :editable="false"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item  label="身高" prop="heightNum">
          <el-input  v-model="addHealthForm.heightNum" placeholder="单位：cm"></el-input>
        </el-form-item>
        <el-form-item label="体重" prop="weightNum">
          <el-input v-model="addHealthForm.weightNum" placeholder="单位：kg"></el-input>
        </el-form-item>
        <el-form-item label="血糖" prop="gluNum">
          <el-input v-model="addHealthForm.gluNum" placeholder="单位：mmol/L"></el-input>
        </el-form-item>
        <el-form-item label="心率" prop="hrNum">
          <el-input v-model="addHealthForm.hrNum" placeholder="单位：次/分钟"></el-input>
        </el-form-item>
        <el-form-item label="体温" prop="tempNum">
          <el-input v-model="addHealthForm.tempNum" placeholder="单位：°C"></el-input>
        </el-form-item>
        <el-form-item label="脉搏" prop="pulseNum">
          <el-input v-model="addHealthForm.pulseNum" placeholder="单位：次/分钟"></el-input>
        </el-form-item>
        <el-form-item label="血压信息:">
        </el-form-item>
        <el-form-item label="高压" prop="highbpNum">
          <el-input v-model="addHealthForm.highbpNum" placeholder="单位：mmHg"></el-input>
        </el-form-item>
        <el-form-item label="低压" prop="lowbpNum">
          <el-input v-model="addHealthForm.lowbpNum" placeholder="单位：mmHg"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addHealth">保存</el-button>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      innerVisible: false,
      olderList: [],
      olderName: '',
      olderPageNum: 1,
      olderPageSize: 3,
      olderTotal: 0,
      addHealthForm:{
        olderId:'',
        name:'',
        collectDate:'',
        heightNum:'',
        weightNum:'',
        gluNum:'',
        hrNum:'',
        tempNum:'',
        pulseNum:'',
        highbpNum:'',
        lowbpNum:''
      },
      addHealthRules:{
        name:[
          {required:true,message:'不能为空',trigger:'blur'}
        ],
        collectDate:[
          {required:true,message:'不能为空',trigger:'blur'}
        ],
        heightNum: [
          {pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '必须为大于0的数字', trigger: 'blur'}
        ],
        weightNum: [
          {pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '必须为大于0的数字', trigger: 'blur'}
        ],
        gluNum: [
          {pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '必须为大于0的数字', trigger: 'blur'}
        ],
        hrNum: [
          {pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '必须为大于0的数字', trigger: 'blur'}
        ],
        tempNum: [
          {pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '必须为大于0的数字', trigger: 'blur'}
        ],
        pulseNum: [
          {pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '必须为大于0的数字', trigger: 'blur'}
        ],
        highbpNum: [
          {pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '必须为大于0的数字', trigger: 'blur'}
        ],
        lowbpNum: [
          {pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '必须为大于0的数字', trigger: 'blur'}
        ],
      },
    };
  },
  methods: {
    selectOlderAdd(id, name) {

      this.addHealthForm.olderId = id;

      this.addHealthForm.name = name;

      this.innerVisible = false;
    },
    //改变长者条数查询
    olderSizeChange(size) {
      this.olderPageSize = size;
      this.olderPageNum = 1;
      this.initOlderList();
    },
    //改变长者页数查询
    olderCurrentChange(now) {
      this.olderPageNum = now;
      this.initOlderList();
    },
    tableRowClassName({rowIndex}) {
      if (rowIndex === 0) {
        return 'white-row'; // 第一行为白色
      } else if (rowIndex % 4 === 1) {
        return 'warning-row'; // 第二行和每隔三行后的行为绿色
      } else if (rowIndex % 2 === 0) {
        return ''; // 第二行和每隔三行后的行为绿色
      } else if (rowIndex % 3 === 2) {
        return 'white-row'; // 第三行和每隔三行后的行为白色
      } else {
        return 'success-row'; // 每隔三行后的行为黄色
      }
    },
    //长者内置搜收框
    searchOlder() {
      this.olderPageNum = 1;
      this.initOlderList();
    },
    //初始化长者信息
    initOlderList() {
      let url = "/Older/list"
      this.$axios.get(url, {
        params: {
          name: this.olderName,
          now: this.olderPageNum,
          size: this.olderPageSize
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.olderList = res.data.data.list;
          this.olderPageNum = res.data.data.pageNum;
          this.olderPageSize = res.data.data.pageSize;
          this.olderTotal = res.data.data.total;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    addHealth(){
      let url = "/health/add" ;
      this.$refs.addHealthForm.validate((valid)=>{
        if (!valid) return ;
        this.$axios.post(url,this.addHealthForm)
            .then((res)=>{
              if (res.data.code == 200) {
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                  duration:1000
                });
                this.$refs.addHealthForm.resetFields();
              }else {
                this.$message({
                  message: res.data.msg,
                  type: 'error',
                  duration:1000
                });
              }
            })
      })
    }
  },
  created() {
    this.initOlderList();
  }
};
</script>
<style lang="less" scoped>
.a{
  width: 800px;
  background-color: white;
  margin-left: 300px;
  padding: 50px;
}
.dialog-footer{
  margin-left: 150px;
}

</style>